import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import CityScene3D from "./components/CityScene3D";
import "./index.css";

export default defineComponent({
  name: "DigitalTwin",
  setup() {
    const router = useRouter();

    const goBack = () => {
      router.push("/");
    };

    return () => (
      <div class="digital-twin">
        <div class="digital-twin__bg">
          <div class="digital-twin__bg-grid"></div>
          <div class="digital-twin__bg-glow digital-twin__bg-glow--1"></div>
          <div class="digital-twin__bg-glow digital-twin__bg-glow--2"></div>
        </div>

        <header class="digital-twin__header">
          <div class="digital-twin__back" onClick={goBack}>
            ← 返回
          </div>
          <h1 class="digital-twin__title">智慧园区数字孪生 3D 系统</h1>
          <div class="digital-twin__time">
            {new Date().toLocaleString("zh-CN")}
          </div>
        </header>

        <div class="digital-twin__scene">
          <CityScene3D />
        </div>

        <footer class="digital-twin__footer">
          <p>智慧园区 | 园区管理 | 3D 数字孪生 | Three.js 驱动</p>
        </footer>
      </div>
    );
  },
});
